<template>
  <el-form :inline="true" :model="courseScoreSearchQuery" class="demo-form-inline">

    <el-form-item label="课程名称">
      <el-select
          v-model="courseScoreSearchQuery.courseName"
          placeholder="请选择课程名称"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in courseOptions"
            :key="item.id"
            :label="item.name"
            :value="item.name"/>
      </el-select>
    </el-form-item>

    <el-form-item label="课程学分区间" style="width: 300px;">
      <el-input v-model="courseScoreSearchQuery.minCourseCredits" placeholder="最小学分" clearable style="width: 45%;"/>
      <p>-</p>
      <el-input v-model="courseScoreSearchQuery.maxCourseCredits" placeholder="最大学分" clearable style="width: 45%;"/>
    </el-form-item>    

    <el-form-item label="老师名称">
      <el-select
          v-model="courseScoreSearchQuery.teacherName"
          placeholder="请选择授课老师"
          style="width: 200px"
          clearable>
        <el-option
            v-for="item in teacherOptions"
            :key="item.id"
            :label="item.name"
            :value="item.name"/>
      </el-select>
    </el-form-item>

    <el-form-item label="课程分数区间" style="width: 300px;">
      <el-input v-model="courseScoreSearchQuery.minCourseScore" placeholder="最低分" clearable style="width: 45%;"/>
      <p>-</p>
      <el-input v-model="courseScoreSearchQuery.maxCourseScore" placeholder="最高分" clearable style="width: 45%;"/>
    </el-form-item>    
    

    <el-form-item>
      <el-button type="primary" @click="onSarch">搜 索</el-button>
      <el-button type="primary" plain @click="onReset">重 置</el-button>
    </el-form-item>
  </el-form>
  <br/><br/>

  <el-button type="primary" @click="addCourseScore">录入学生成绩</el-button>
  <el-button type="danger" @click="batchDelCourseScore">批量删除学生成绩</el-button>
  <br/><br/>

  <el-table
      ref="multipleTableRef"
      :data="courseScoreList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column property="courseName" label="课程名" />
    <el-table-column property="courseCredits" label="课程学分" />
    <el-table-column property="teacherName" label="老师姓名" width="200"/>
    <el-table-column property="studentName" label="学生姓名" width="200"/>
    <el-table-column property="courseScore" label="课程分数" />
    <el-table-column label="操作" width="230">
      <template #default="scope"><!--vue插槽-->
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br/>

  <el-pagination background
                 layout="prev, pager, next"
                 :page-size="pageSize"
                 :total="totalRow"
                 @prev-click="page"
                 @next-click="page"
                 @current-change="page"/>

</template>

<script>
import {doPost, doGet} from "@/http/axios-http";
import {message, messageConfirm} from "@/http/message";

export default {

  //注入reload
  inject : ['reload'],

  data() {
    return {
      //成绩管理搜索条件对象，初始值是空
      courseScoreSearchQuery : {},
      //成绩管理列表list对象数据，初始值是空
      courseScoreList : [{}],
      //每页显示多少条
      pageSize : 0,
      //总共有多少条
      totalRow : 0,
      //勾选了哪些成绩管理id，默认值是空
      courseScoreIdArray : [],
      teacherOptions:[{}],
      courseOptions:[{}],
      courseScoreRelation:{}
    }
  },

  //页面渲染时触发该钩子函数
  mounted() {
    this.getData();
    this.loadAllTeacher();
    this.loadAllCourse();
  },

  methods : {
    loadAllTeacher(){
      doGet('/teacher/tea_info/getAll').then(resp=>{
        console.log(resp.data)
        if(resp.data.code==200){
          this.teacherOptions = resp.data.data;
        }else {
            //提示一下
            message("拿到老师信息失败，原因：" + resp.data.msg, "error");
          }
      })
    },
    loadAllCourse(){
      doGet('/course/course_info/getAll').then(resp=>{
        console.log(resp)
        if(resp.data.code==200){
          this.courseOptions = resp.data.data
        }else {
            //提示一下
            message("拿到课程信息失败，原因：" + resp.data.msg, "error");
          }
      })
    },
    //查询成绩管理列表数据
    getData() {
      doGet('/course_score/course_score_info/getCourseScoreByPage',this.courseScoreSearchQuery).then(resp => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.courseScoreList = resp.data.data.dataList;
          this.pageSize = resp.data.data.pageSize;
          this.totalRow = resp.data.data.totalRow;
        }
      })
    },

    //搜索
    onSarch() {
      this.getData();
    },
    //重置
    onReset() {
      this.courseScoreSearchQuery = {};
    },

    //录入成绩管理
    addCourseScore() {
      //跳转路由
      this.$router.push({path : "/teacherDash/course_score_info/add"});
      //window.location.href = "/dashboard/courseScore/add";
    },


    //编辑成绩管理
    edit(id) {
      console.log(id);
      this.$router.push({path : "/teacherDash/course_score_info/edit/" + id});
    },

  //删除学生选课
  del(id) {
      //首先提示用户是否确定要删除
      messageConfirm("您是否确定要删除此数据？").then(() => { //当你点“确定”，执行该函
        doPost("/student_course/student_course_info/del/" + id, {}).then(resp => {
          if (resp.data.code === 200) {
            //删除成功
            message("删除成功", "success");
            //刷新页面
            this.reload();
          } else {
            message("删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(error => { //当你点“取消”，执行该函数
        message("删除错误:"+error, "warning");
        
      });
    },

    //批量删除学生选课
    batchDelCourseScore() {
      //用户没有选数据，要提示一下
      if (this.courseScoreIdArray.length <= 0) {
        message("请选择要删除的数据", "warning");
        return;
      }
      //1、拿到选择的id
      let ids = this.courseScoreIdArray.join(",");  //得到：ids = "1,2,5,7,10,12"
      //2、把这些id的数据删除
      messageConfirm("您是否确定要删除这些数据？").then(() => { //当你点“确定”，执行该函
        doPost("/student_course/student_course_info/batchDel/" + ids, {}).then(resp => {
          if (resp.data.code === 200) {
            //删除成功
            message("删除成功", "success");
            //刷新页面
            this.reload();
          } else {
            //删除失败
            message("删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(() => { //当你点“取消”，执行该函数
        message("删除已取消", "warning");
      });
    },


    //勾选或取消复选框时触发该函数
    handleSelectionChange(selection) {
      //勾选或取消复选框时，先把用户id的数组清空
      this.courseScoreIdArray = [];
      selection.forEach( (courseScore) => {
        this.courseScoreIdArray.push(courseScore.id);
      });
    }
  }
}

</script>

<style>

</style>
